<template>

  <div class="contentList" id="contentList" ref="contentList">

    <div class="childBox">
      <div class="title flex">
        <div>批次信息</div>
      </div>
      <div class="plate flex">
        <div class="img" style="width: 300px;height: 160px;">
          <img :src="batchInfo.pictureImg" alt="">
        </div>
        <div class="batchInfo">
          <div class="info"> <span class="label">批次编号：</span> {{ batchInfo.batchName }}</div>
          <div class="info"> <span class="label">养殖品种：</span> {{ fishVarietyName }}</div>
          <div class="info"> <span class="label">码单号：</span> {{ batchInfo.batchCode }}</div>
          <div class="info"> <span class="label">养殖鱼塘：</span> {{ batchInfo.pondName }}</div>
          <div class="info"> <span class="label">养殖周期：</span>
            {{ batchInfo.buildDateTime }}
            {{ batchInfo.buildDateTime && batchInfo.completeDateTime ? '-' : '' }}
            {{ batchInfo.completeDateTime }}</div>
          <div class="info"> <span class="label">批养殖面积：</span> {{ batchInfo.areaStr }}</div>
        </div>
        <div class="qrCode">
          <div class="img">
            <Qrcode
              :apkUrl="`http://fishery.ssagroup.cn:8080/h5/#/?traceSourceFlag=false&batchId=${batchParticularsInfo.batchId}&homeBaseId=${homeBaseId}`">
            </Qrcode>
          </div>
          <div style="padding-top: 20px;color: #469bdf;">扫码溯源</div>
        </div>
      </div>
    </div>
    <div class="childBox">
      <div class="title flex">
        <div>主体信息</div>
      </div>
      <div class="plate plate_zt">
        <div class="info_zt">
          <div class="info"> <span class="label">主体名称：</span>{{ homeBaseName }}</div>
          <div class="info"> <span class="label">主体地址：</span> {{ baseBasic.address }}</div>
          <div class="info"> <span class="label">主体负责人：</span> {{ baseBasic.principal }}</div>
        </div>
        <div class="info_zt">
          <div class="info flex" style="width: 100%; margin: 0;">
            <span class="label">主体资质：</span>
            <div class="imglList flex">
              <template v-if="baseBasicImgList.length > 5">
                <div class="toLeftRightBtn left" @click="changeList">
                  <i class="el-icon-caret-left"></i>
                </div>
                <div class="toLeftRightBtn right">
                  <i class="el-icon-caret-right"></i>
                </div>
              </template>
              <div class="baseBasicImg" v-for="imgUrl, index in baseBasicImgList" :key="index">
                <img :src="imgUrl" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="childBox">
      <div class="title flex">
        <div>鱼种信息</div>
      </div>
      <div class="plate plate_zm">
        <div class="info_zt">
          <div class="info"> <span class="label">鱼种名称：</span> {{ fishVarietyName }}</div>
          <div class="info"> <span class="label">投入数量：</span> {{ fryObj.inputNum || 0 }}尾</div>
          <div class="info"> <span class="label">投入总重量：</span> {{ fryObj.inputWeight || 0 }}斤</div>
          <!-- <div class="info"> <span class="label">供应商：</span> xxxxxx</div>
            <div class="info"> <span class="label">供应商负责人：</span> xxxxxx</div>
            <div class="info"> <span class="label">供应商联系电话：</span> xxxxxx</div> -->
        </div>
      </div>
    </div>

    <div class="childBox">
      <div class="title flex">
        <div>农资信息</div>
      </div>
      <div class="plate plate_zm" v-if="materialRecordInfo.length > 0">
        <div class="info_zt" v-for="info, index in materialRecordInfo" :key="index">
          <div class="info"> <span class="label">农资名称：</span> {{ info.materialName }}</div>
          <div class="info"> <span class="label">投入数量：</span> {{ info.inputAuxiliaryUnitNum + info.auxiliaryUnit
            }}
          </div>
          <div class="info"> <span class="label">投入量：</span> {{ info.inputBasicUnitNum + info.basicUnit }}</div>
        </div>
      </div>
      <div v-else class="noData">暂无数据！</div>
    </div>

    <div class="childBox">
      <div class="title flex">
        <div>转塘信息</div>
      </div>
      <div class="plate plate_zm" v-if="transferSeparatePondInfo.length > 0">
        <div class="info_zt" v-for="info, index in transferSeparatePondInfo" :key="index">
          <template v-if="!info.inFlag">
            <div class="info"> <span class="label"> 原先批次：</span> {{ batchCode }}</div>
            <div class="info"> <span class="label"> 目标批次：</span> {{ info.batchName }}</div>
            <div class="info"> <span class="label">转出数量：</span> {{ info.num }}尾</div>
            <div class="info"> <span class="label">转出总重量：</span> {{ info.weight }}斤</div>
            <div class="info"> <span class="label">转出人：</span> {{ info.staffName }}</div>
            <div class="info"> <span class="label">转塘日期：</span> {{ formatDateTimeMHS(info.transferSeparateDate,
            false)
              }}
            </div>
          </template>
          <template v-else>
            <div class="info"> <span class="label"> 原先批次：</span> {{ info.batchName }}</div>
            <div class="info"> <span class="label"> 目标批次：</span> {{ batchCode }}</div>
            <div class="info"> <span class="label">转入数量：</span> {{ info.num }}尾</div>
            <div class="info"> <span class="label">转入总重量：</span> {{ info.weight }}斤</div>
            <div class="info"> <span class="label">转入人：</span> {{ info.staffName }}</div>
            <div class="info"> <span class="label">转塘日期：</span> {{ formatDateTimeMHS(info.transferSeparateDate,
            false)
              }}
            </div>
          </template>
        </div>
      </div>
      <div v-else class="noData">暂无数据！</div>
    </div>

    <div class="childBox">
      <div class="title flex">
        <div>出入鱼信息</div>
      </div>
      <div class="plate plate_zm">
        <div class="fishInfo">
          <div class="fishData">初始鱼均重：{{ submitProduceInfo.inputAvgWeight ? submitProduceInfo.inputAvgWeight : '0'
            }}斤
          </div>
          <div class="fishData">产出鱼均重：{{ submitProduceInfo.produceAvgWeight ? submitProduceInfo.produceAvgWeight :
            '0' }}斤</div>
          <div class="fishData">初始鱼数量：{{ submitProduceInfo.inputNum ? submitProduceInfo.inputNum : '0' }}尾</div>
          <div class="fishData">产出鱼数量：{{ submitProduceInfo.produceNum ? submitProduceInfo.produceNum : '0' }}斤
          </div>
          <div class="fishData">直鱼数量：{{ submitProduceInfo.deadNum ? submitProduceInfo.deadNum : '0' }}尾</div>
          <div class="fishData">次鱼数量：{{ submitProduceInfo.secondaryNum ? submitProduceInfo.secondaryNum : '0' }}尾
          </div>
        </div>
        <div class="info_zt">
          <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto" v-if="productInfoList.length">
            <li v-for="i in count" class="info flex" :key="i">
              <div v-if="productInfoList[i]" class="info"> <span class="label">出鱼类型：</span> {{
            productInfoList[i].fishType }}</div>
              <div v-if="productInfoList[i]" class="info"> <span class="label">出鱼数量：</span> {{
            productInfoList[i].num
          }}尾</div>
              <div v-if="productInfoList[i]" class="info"> <span class="label">出鱼规格：</span> {{
            productInfoList[i].spec
          }}斤</div>
              <div v-if="productInfoList[i]" class="info"> <span class="label">出鱼重量：</span> {{
            productInfoList[i].weight
          }}斤</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="childBox childBox_jd" v-for="info, index in stageInfoList" :key="index">
      <div class="title">
        <div class="titleName">{{ info.stageName }}</div>
        <span> {{ `(${info.startDate}-${info.endDate})` }}</span>
        <span style="color: #469bdf;padding-left:60px;cursor: pointer;" @click="getAllStageInfo(info, index)">{{
            isSendRequest[index].flag ? '收起' : '展开' }}</span>
      </div>
      <transition name="fade">
        <div class="stage" v-show="isSendRequest[index].flag">
          <div class="stageItem">
            <div class="stageTitle flex">
              <div class="label">检验报告</div>
              <div class="line"></div>
            </div>
            <div class="stageInfo">
              <template>
                <el-table :data="info.checkInfo['tableData']" border stripe style="width: 100%">
                  <el-table-column :index="(i) => { return i + 1 }" type="index" label="序号" width="50">
                  </el-table-column>
                  <el-table-column prop="staffName" label="检验人">
                  </el-table-column>
                  <el-table-column prop="plantVarietyName" label="检验品种">
                  </el-table-column>
                  <el-table-column prop="checkTime" label="检验时间">
                  </el-table-column>
                  <el-table-column prop="supplier" label="供应商">
                    <template slot-scope="scope">
                      <span>{{ scope.row.supplier ? scope.row.supplier : '--' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="normal" label="是否正常">
                    <template slot-scope="scope">
                      <span>{{ scope.row.status == 'COMPLETION' ? '合格' : '不合格' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="查看">
                    <template slot-scope="scope">
                      <el-button @click="handleRow(scope.row)">查看结果</el-button>
                    </template>
                  </el-table-column>

                </el-table>
                <el-button v-show="info.checkInfo.num > info.checkInfo['tableData'].length"
                  style="width:100%;margin-top:5px" size="mini" type="primary" plain
                  @click="queryCheckInfo(info, index)">查询更多</el-button>
              </template>
            </div>
          </div>
          <div class="stageItem">
            <div class="stageTitle flex">
              <div class="label">环境数据</div>
              <div class="line"></div>
            </div>
            <div class="stageInfo flex">
              <div class="weatherData" style="padding:0 20px"
                v-if="info.environmentInfo.filter(item => { return item.innerDataList.length > 1 }).length">
                <template v-for="(data) in info.environmentInfo">
                  <el-button v-if="data.innerDataList.length > 1" type="primary" plain :key="data.dataItemName"
                    @click="getLineEchats(data, index)">{{
            data.dataItemName
          }}</el-button>
                </template>
              </div>
              <div v-else class="noData" style="width: 100%;">暂无数据！</div>
              <div v-if="info.environmentInfo.filter(item => { return item.innerDataList.length > 1 }).length"
                class="eCharts lineChart">
                <div :id="'lineChart' + index" style="height: 300px;"></div>
              </div>
            </div>
          </div>
          <div class="stageItem">
            <div class="stageTitle flex">
              <div class="label">作业数据</div>
              <div class="line"></div>
            </div>
            <div class="stageInfo">
              <div style="padding: 10px 15px;">
                <el-button type="primary" plain @click="queryHangNetWorkInfo(info, index)">吊网作业</el-button>
                <el-button type="primary" plain @click="queryExposedNetWorkInfo(info, index)">露网作业</el-button>
                <el-button type="primary" plain @click="queryFeedWorkInfo(info, index)">投喂作业</el-button>
              </div>
              <div class="table">
                <template v-if="info.operationFlag == '1' && info.hangNetWorkInfo['tableData']">
                  <el-table :data="info.hangNetWorkInfo['tableData']" border stripe style="width: 100%">
                    <el-table-column :index="(i) => { return i + 1 }" type="index" label="序号" width="50">
                    </el-table-column>
                    <el-table-column prop="staffName" label="吊网作业人">
                    </el-table-column>
                    <el-table-column prop="season" label="季节">
                    </el-table-column>
                    <el-table-column prop="position" label="位置">
                    </el-table-column>
                    <el-table-column prop="workBeginTime" label="作业开始时间">
                    </el-table-column>
                  </el-table>
                  <el-button v-show="info.hangNetWorkInfo.num > info.hangNetWorkInfo['tableData'].length"
                    style="width:100%;margin-top:5px" size="mini" type="primary" plain
                    @click="queryHangNetWorkInfo(info, index)">查询更多</el-button>
                </template>
                <template v-if="info.operationFlag == '2' && info.exposedNetWorkInfo['tableData']">
                  <el-table :data="info.exposedNetWorkInfo['tableData']" border stripe style="width: 100%">
                    <el-table-column :index="(i) => { return i + 1 }" type="index" label="序号" width="50">
                    </el-table-column>
                    <el-table-column prop="staffName" label="露网作业人">
                    </el-table-column>
                    <el-table-column prop="season" label="季节">
                    </el-table-column>
                    <el-table-column prop="position" label="位置">
                    </el-table-column>
                    <el-table-column prop="workBeginTime" label="作业开始时间">
                    </el-table-column>
                  </el-table>
                  <el-button v-show="info.exposedNetWorkInfo.num > info.exposedNetWorkInfo['tableData'].length"
                    style="width:100%;margin-top:5px" size="mini" type="primary" plain
                    @click="queryExposedNetWorkInfo(info, index)">查询更多</el-button>
                </template>
                <template v-if="info.operationFlag == '3' && info.feedWorkInfo['tableData']">
                  <el-table :data="info.feedWorkInfo['tableData']" border stripe style="width: 100%">
                    <el-table-column :index="(i) => { return i + 1 }" type="index" label="序号" width="50">
                    </el-table-column>
                    <el-table-column prop="staffName" label="投喂人">
                    </el-table-column>
                    <el-table-column prop="materialName" label="投喂物料名称">
                    </el-table-column>
                    <el-table-column prop="num" label="投喂量">
                    </el-table-column>
                    <el-table-column prop="workDateTime" label="投喂时间">
                    </el-table-column>
                  </el-table>
                  <el-button v-show="info.feedWorkInfo.num > info.feedWorkInfo['tableData'].length"
                    style="width:100%;margin-top:5px" size="mini" type="primary" plain
                    @click="queryFeedWorkInfo(info, index)">查询更多</el-button>
                </template>
              </div>
            </div>
          </div>
          <div class="stageItem">
            <div class="stageTitle flex">
              <div class="label">农资数据</div>
              <div class="line"></div>
            </div>
            <div class="stageInfo flex" v-if="info.materialRecordInfoByStage.length > 0">
              <div class="inputGoods" v-for="dueg, index in info.materialRecordInfoByStage" :key="index">
                <div class="info" :title="dueg.materialName">{{ dueg.materialName }}</div>
                <div class="Goodsline" />
                <div class="info" style="color: #666666;">{{ dueg.inputBasicUnitNum }}{{ dueg.basicUnit }}</div>
              </div>
            </div>
            <div v-else class="noData">暂无数据！</div>
          </div>
          <div class="stageItem">
            <div class="stageTitle flex">
              <div class="label">防治数据</div>
              <div class="line"></div>
            </div>
            <div class="stageInfo">
              <div style="margin: 10px 15px;padding-left: 15px; border-left: 3px solid #469bdf;">
                <span style="color: #666666;">累计防治次数：</span>
                <span style="color: #469bdf;">{{ info.epidemicPreventionInfo.num }}</span>
              </div>
              <div class="table" style="padding: 0 20px;">
                <template>
                  <el-table :data="info.epidemicPreventionInfo['tableData']" border stripe style="width: 100%">
                    <el-table-column :index="(i) => { return i + 1 }" type="index" label="序号" width="50">
                    </el-table-column>
                    <el-table-column prop="staffName" label="防治人">
                    </el-table-column>
                    <el-table-column label="防治类型">
                      <template slot-scope="scorp">
                        {{ scorp.row.diseaseName ? '疾病预防' : '日常维护' }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="diseaseName" label="疾病名称">
                      <template slot-scope="scorp">
                        {{ scorp.row.diseaseName ? scorp.row.diseaseName : '--' }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="epidemicPreventionDetailList" label="使用药物">
                      <template slot-scope="scorp">
                        <span v-if="scorp.row.preventionManagementDetailList.length">
                          <span>使用</span><span v-for="item, index in scorp.row.preventionManagementDetailList"
                            :key="index">
                            {{ item.amount }}
                            {{ materialObj[item.materialId].unit }}({{
            item.materialName }})进行{{ item.workWays }}作业;</span>
                        </span>
                        <span v-else>--</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="operationTime" label="防治时间">
                      <template slot-scope="scorp">
                        {{ formatDateTime(scorp.row.dealDate) }}
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-button v-show="info.epidemicPreventionInfo['tableData'].length < info.epidemicPreventionInfo.num"
                    style="width:100%;margin-top:5px" size="mini" type="primary" plain
                    @click="queryEpidemicPreventionInfo(info, index)">查询更多</el-button>
                </template>
              </div>
            </div>
          </div>

          <div class="stageItem">
            <div class="stageTitle flex">
              <div class="label">治疗数据</div>
              <div class="line"></div>
            </div>
            <div class="stageInfo">
              <div style="margin: 10px 15px;padding-left: 15px; border-left: 3px solid #469bdf;">
                <span style="color: #666666;">累计治疗次数：</span>
                <span style="color: #469bdf;">{{ info.diseaseRecord.num }}</span>
              </div>
              <div class="table" style="padding: 0 20px;">
                <template>
                  <el-table :data="info.diseaseRecord['tableData']" border stripe style="width: 100%">
                    <el-table-column :index="(i) => { return i + 1 }" type="index" label="序号" width="50">
                    </el-table-column>
                    <el-table-column prop="diseaseName" label="疾病名称">
                    </el-table-column>
                    <el-table-column prop="findDate" label="发生时间">
                    </el-table-column>
                    <el-table-column prop="num" label="患病鱼数量">
                    </el-table-column>
                    <el-table-column label="使用的药物">
                      <template slot-scope="scorp">
                        <span v-if="scorp.row.medicineList.length">
                          <span>使用</span><span v-for="item, index in scorp.row.medicineList" :key="index">({{
            item.materialName }}){{
            item.amount }}{{ materialObj[item.materialId].unit }};</span>
                        </span>
                        <span v-else>--</span>
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-button v-show="info.diseaseRecord.num > info.diseaseRecord['tableData'].length"
                    style="width:100%;margin-top:5px" size="mini" type="primary" plain
                    @click="queryDiseaseRecord(info, index)">查询更多</el-button>
                </template>
              </div>
            </div>
          </div>
          <div class="stageItem">
            <div class="stageTitle flex">
              <div class="label">疾病统计</div>
              <div class="line"></div>
            </div>
            <div class="stageInfo" v-if="info.diseaseCount.length > 0">
              <div class="eCharts barEcharts" style="padding: 0 20px ;width: 100%;">
                <div :id="'barChart' + index" style="height: 300px;"></div>
              </div>
            </div>
            <div v-else class="noData">暂无数据！</div>
          </div>
        </div>
      </transition>
    </div>
    <AddEdit :title="'查看质检单'" @closeDialog="closeDialog" :addEditFlag="addEditFlag" :dialogVisible="dialogVisible"
      :data="formData">
    </AddEdit>
  </div>
</template>

<script>
//阶段
import store from "@/store";
import traceabilityMsgApi from "@/api/traceability/basicsInfo/traceabilityMsg";
import pondStockingManagement from '@/api/production-management/pond-stocking-management.js';
//主体
import subjectInfoApi from "@/api/traceability/basicsInfo/subjectInfo";
//溯源基本信息Api
import traceabilitySystem from "@/api/traceability/traceabilitySystem";
import Qrcode from "@/components/qrcode";

import DocumentApi from "@/api/document";
import { blobToBase64 } from "@/utils/convert";


import AddEdit from './components/addEdit.vue';
import Pagination from "@/components/Pagination";
import BaseMainSlot from "@/components/BaseMainSlot/kong-new.vue";
import { mymixin } from "@/utils/mixin";
import { mapGetters } from "vuex";
export default {
  name: "StaffManage",
  components: {
    Pagination,
    BaseMainSlot,
    Qrcode, AddEdit
  },
  props: {
    batchParticularsInfo: {
      type: Object,
      default: () => ({})
    }
  },

  mixins: [mymixin],
  data() {
    return {
      formData: {},
      addEditFlag: 'edit',
      dialogVisible: false,
      resetFormInfo: false,
      fishVarietyId: 0,
      fishVarietyName: '',
      contentListHtml: "<div></div>",
      searchInfo: {},
      batchList: [],
      eChartsIndex: '1',
      count: 0,//出入任务滚动条初始值
      loading1: false,//出入任务滚动条loading
      homeBaseName: sessionStorage.getItem('homeBaseName'),
      batchCode: "批次123465",
      batchId: 28,
      batchInfo: {},//批次信息
      baseBasicImgList: [],//主体资质图片
      baseBasic: {}, //主体资质
      fryObj: {},//鱼苗
      materialRecordInfo: [],//农资信息
      transferSeparatePondInfo: [],//转分塘
      submitProduceInfo: {},//出鱼任务
      productInfoList: [],//出鱼记录
      stageInfoList: [], //阶段查询
      homeBaseId: sessionStorage.getItem('homeBaseId'),
      isSendRequest: {}
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission",
    }),

    materialObj() {
      return store.state.basicData.material;
    }
  },
  watch: {
    'batchParticularsInfo.batchId': {
      handler(v) {
        v && this.initData()
      }
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    //初始化
    async initData() {
      console.log(this.batchParticularsInfo)
      let batchInfo = this.batchParticularsInfo
      if (batchInfo.batchCode && batchInfo.batchId) {
        this.batchCode = batchInfo.batchCode
        this.batchId = batchInfo.batchId
        this.fishPondId = batchInfo.fishPondId
        this.fishVarietyId = batchInfo.fishVarietyId
        this.queryBatchFishVariety(this.batchId)
      }
    },

    async queryBatchFishVariety(batchId) {
      this.resetFormInfo = false;
      let { data: fishVarietyList } = await pondStockingManagement.batchPondInfoList({ batchId });
      let rut = fishVarietyList.find(item => { return item.fishVarietyId == this.fishVarietyId });
      this.resetFormInfo = true;
      this.fishVarietyName = rut?.fishVarietyName
      this.querTraceabilityInfo();
    },

    //查询溯源信息列表
    querTraceabilityInfo() {
      //批次信息 batchInfo
      this.queryPageList()
      //主体信息
      this.queryByHomeBaseId()
      //鱼种信息
      this.queryInputPondInfo()
      //农资信息
      this.queryMaterialRecordInfo()
      //转分塘
      this.queryTransferSeparatePondInfo()
      //出入鱼信息
      this.queryStageInfo()
      //阶段
      this.querySubmitProduceInfo()
    },
    //查看报告
    handleRow(rowData) {
      this.dialogVisible = true;
      this.formData = JSON.parse(JSON.stringify(rowData))
    },
    handleChange() {
      this.activeName ? this.activeName = '1' : his.activeName = ''
    },
    querySearchInfo() {
      console.log(this.searchInfo)
    },
    load() {
      if (this.count >= this.productInfoList.length) {
        this.count == this.productInfoList.length
      } else {
        this.count += 1
      }
    },
    getLineEchats(data, index) {
      if (!data.innerDataList.length) {
        return
      }
      const myChart = this.$echarts.init(document.getElementById('lineChart' + index))
      if (data.innerDataList.length == 0) {
        document.querySelectorAll('.lineChart')[0].style.display = 'none'
        return
      } else {
        document.querySelectorAll('.lineChart')[0].style.display = 'block'
      }
      let xAxis = []
      let series = []
      data.innerDataList.forEach(item => {
        xAxis.push(item.date)
        series.push(item.value)
      })
      myChart.setOption({
        tooltip: {},
        legend: {
          data: [data.dataItemName]
        },
        xAxis: {
          data: xAxis
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 10
          },
          {
            start: 0,
            end: 10
          }
        ],
        yAxis: {},
        series: [{
          name: data.dataItemName,
          type: 'line',
          data: series
        }]
      })
    },
    getBarEchats(data, index) {
      if (!data.length) return;
      const myChart = this.$echarts.init(document.getElementById('barChart' + index))
      let dataArr = []
      let date = []; //x轴日期
      let lenged = []; //series的个数
      let series = [];
      data.forEach(item => {
        item.list.forEach(item1 => {
          dataArr.push({
            '日期': item.date,
            '疾病名称': item1.diseaseName,
            '患病数量': item1.num
          })
        })
      })
      dataArr.map((item) => {
        date.push(item["日期"]);
        lenged.push(item["疾病名称"]);
      });

      console.log(dataArr, '-----')
      date = [...new Set(date)]; //去重
      lenged = [...new Set(lenged)];
      lenged.map((item) => { //生成  series
        let obj = {
          name: item,
          type: "bar",
          stack: "As",
          emphasis: {
            focus: 'series'
          },
          data: []
        };
        series.push(obj);
      });
      dataArr.map((item) => {//对series 的dataArr进行处理
        series.map((item1) => {
          console.log(item1.name == item["疾病名称"] && date.indexOf(item["日期"]) > -1)
          if (item1.name == item["疾病名称"] && date.indexOf(item["日期"]) > -1) {
            item1.data[date.indexOf(item["日期"])] = item["患病数量"]
          };
        })
      })
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: date
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: series
      };
      myChart.setOption(option);
    },
    //关闭弹窗
    closeDialog() {
      this.formData = {};
      this.dialogVisible = false;
    },
    changeList() {
      let nArr = this.baseBasicImgList.splice(0, 5)
      this.baseBasicImgList.push(nArr)
    },
    //查询溯源信息列表
    querAllTraceabilityInfo() {
      traceabilityMsgApi.queryPageByCondition({
        page: 1,
        size: 1000,
      }).then(async res => {
        if (res.success === true) {
          this.batchList = res.data.content
          if (this.batchList.length) {
            this.batchCode = this.batchList[0].batchCode
            this.batchId = this.batchList[0].batchId
          }
        } else {
          this.batchList = []
        }
      });
    },
    //查询溯源信息列表
    queryPageList() {
      let params = {
        page: 1,
        size: 1,
        entity: {
          batchId: this.batchId
        }
      };
      traceabilityMsgApi.queryPageByCondition(params).then(async res => {
        if (res.success === true && res.data.content[0]) {
          console.log(res.data.content, '----')
          if (this.batchInfo && res.data.content[0].pictureId) {
            this.batchInfo['pictureImg'] = this.$baseurl.fileServiceUrl + 'base/files/preview?fileId=' + res.data.content[0].pictureId
          } else {
            this.batchInfo['pictureImg'] = require("@/assets/fish.jpg")
          }
          this.batchInfo = { ...this.batchInfo, ...res.data.content[0] }
          console.log(this.batchInfo, '批次')
        } else {
          this.batchInfo = {}
        }
        this.routerParams = {}
      });
    },
    formatDateTimeMHS(val, isTime = true) {
      if (val) {
        var time = new Date(val);
        var year = time.getFullYear(); // 取得4位数的年份
        var month = time.getMonth() + 1; // 取得日期中的月份，其中0表示1月，11表示12月
        month = month < 10 ? ('0' + month) : month;
        var date = time.getDate(); // 返回日期月份中的天数（1到31）
        date = date < 10 ? ('0' + date) : date;
        var hour = time.getHours(); // 返回日期中的小时数（0到23）
        hour = hour < 10 ? ('0' + hour) : hour;
        var minute = time.getMinutes(); // 返回日期中的分钟数（0到59）
        minute = minute < 10 ? ('0' + minute) : minute;
        var second = time.getSeconds(); // 返回日期中的秒数（0到59）
        second = second < 10 ? ('0' + second) : second;
        if (isTime) {
          return year + "-" + month + "-" + date + ' ' + hour + ':' + minute + ':' + second;
        } else {
          return year + "-" + month + "-" + date;
        }
        // return year + "年" + month + "月" + date + " " + hour + ":" + minute + ":" + second;}
      }
    },
    //查询主体信息
    queryByHomeBaseId() {
      subjectInfoApi.queryByHomeBaseId({ homeBaseId: sessionStorage.getItem('homeBaseId') }).then(res => {
        if (res && res.data) {
          this.baseBasic = res.data
          this.baseBasicImgList = []
          if (res.data.pictureIdList.length > 0) {
            res.data.pictureIdList.forEach(imgId => {
              this.baseBasicImgList.push(this.$baseurl.fileServiceUrl + 'base/files/preview?fileId=' + imgId)
            })
          }
          console.log(this.baseBasic, '主体信息')
          console.log(this.baseBasicImgList, '主体图片')
        }
      })
    },
    //鱼种信息
    queryInputPondInfo() {
      traceabilitySystem.queryInputPondInfo({ batchId: this.batchId, fishVarietyId: this.fishVarietyId }).then(res => {
        console.log('鱼种信息', res.data)
        if (res.success) {
          this.fryObj = res.data
        } else {
          this.fryObj = {}
        }
      })
    },
    //农资信息
    queryMaterialRecordInfo() {
      // debugger
      traceabilitySystem.queryMaterialRecordInfo({ batchId: this.batchId }).then(res => {
        console.log('农资信息', res.data)
        if (res.success) {
          this.materialRecordInfo = res.data
        } else {
          this.materialRecordInfo = []
        }
      })
    },
    //转分塘
    queryTransferSeparatePondInfo() {
      traceabilitySystem.queryTransferSeparatePondInfo({ batchId: this.batchId, fishVarietyId: this.fishVarietyId }).then(res => {
        console.log('转分塘', res.data)
        if (res.success) {
          this.transferSeparatePondInfo = res.data
        } else {
          this.transferSeparatePondInfo = []
        }
      })
    },
    //出鱼
    querySubmitProduceInfo() {
      traceabilitySystem.querySubmitProduceInfo({ batchId: this.batchId, fishVarietyId: this.fishVarietyId }).then(res => {
        console.log('出鱼信息', res.data)
        if (res.success) {
          this.submitProduceInfo = res.data
        } else {
          this.submitProduceInfo = {}
        }
      })
      this.queryProductInfo();
    },
    //出鱼任务记录
    queryProductInfo() {
      traceabilitySystem.queryProductInfo({ batchId: this.batchId, fishVarietyId: this.fishVarietyId }).then(res => {
        console.log('出鱼信息', res.data)
        if (res.success) {
          this.productInfoList = res.data
        } else {
          this.productInfoList = []
        }
      })
    },
    //查询阶段信息
    queryStageInfo() {
      traceabilitySystem.queryStageInfo({ batchId: this.batchId, fishVarietyId: this.fishVarietyId }).then(res => {
        console.log('阶段查询', res.data)
        if (res.success) {
          res.data.forEach((stageInfo, index) => {
            stageInfo['hangNetWorkInfo'] = { tableData: [], page: 1, num: 0 }
            stageInfo['feedWorkInfo'] = { tableData: [], page: 1, num: 0 }
            stageInfo['exposedNetWorkInfo'] = { tableData: [], page: 1, num: 0 }
            stageInfo['epidemicPreventionInfo'] = { tableData: [], page: 1, num: 0 }
            stageInfo['diseaseRecord'] = { tableData: [], page: 1, num: 0 }
            stageInfo['checkInfo'] = { tableData: [], page: 1, num: 0 }
            stageInfo['materialRecordInfoByStage'] = []
            stageInfo['diseaseCount'] = []
            stageInfo['environmentInfo'] = []
            stageInfo['operationFlag'] = '1'
            stageInfo['isShow'] = false
            this.$set(this.isSendRequest, index, {
              isShowContent: false,
              flag: false
            })
          })
          this.stageInfoList = res.data
        } else {
          this.stageInfoList = []
        }
        // let one = this.$refs.contentList.childNodes[0]
        // this.$refs.contentList.childNodes.push(one)
        // this.$refs.contentList.childNodes.push(this.$refs.contentList.childNodes[0])
        // let domeLit = Array.from(this.$refs.contentList.children);
        // domeLit.push(domeLit[0])
        // this.$refs.contentList.children = domeLit
        document.getElementById("contentList");
        console.log(this.$refs.contentList)
      })
    },
    //获取选中阶段的信息
    getAllStageInfo(stageInfo, index) {
      if (!this.isSendRequest[index].isShowContent) {
        this.queryExposedNetWorkInfo(stageInfo, index);
        this.queryFeedWorkInfo(stageInfo, index);
        this.queryHangNetWorkInfo(stageInfo, index);
        this.queryCheckInfo(stageInfo, index);
        this.queryEpidemicPreventionInfo(stageInfo, index);
        this.queryDiseaseRecord(stageInfo, index);
        this.queryMaterialRecordInfoByStage(stageInfo, index);
        this.queryEnvironmentInfo(stageInfo, index);
        this.queryDiseaseCount(stageInfo, index)
        this.isSendRequest[index].isShowContent = true
      }
      this.isSendRequest[index].flag = !this.isSendRequest[index].flag
    },
    //漏网作业
    queryExposedNetWorkInfo(info, index) {
      let initPage = info['exposedNetWorkInfo'] && info['exposedNetWorkInfo'].page ? info['exposedNetWorkInfo'].page : 1
      traceabilitySystem.queryExposedNetWorkInfo({
        entity: {
          batchId: this.batchId,
          endDate: `${info.endDate} 00:00:00`, startDate: `${info.startDate} 12:59:59`
        },
        page: 1,
        size: 10 * initPage,
      }).then(res => {
        this.$set(this.stageInfoList[index], 'exposedNetWorkInfo', {
          tableData: res.data.content,
          page: ++info['exposedNetWorkInfo'].page,
          num: res.data.totalElements
        })
        this.$set(this.stageInfoList[index], 'operationFlag', '2')
        console.log('漏网作业', res.data, this.stageInfoList)
      })
    },
    //投喂作业
    queryFeedWorkInfo(info, index) {
      let initPage = info['feedWorkInfo'] && info['feedWorkInfo'].page ? info['feedWorkInfo'].page : 1
      traceabilitySystem.queryFeedWorkInfo({
        entity: {
          batchId: this.batchId,
          endDate: `${info.endDate}`, startDate: `${info.startDate}`
        },
        page: 1,
        size: 10 * initPage,
      }).then(res => {
        this.$set(this.stageInfoList[index], 'feedWorkInfo', {
          tableData: res.data.content,
          page: ++info['feedWorkInfo'].page,
          num: res.data.totalElements
        })
        this.$set(this.stageInfoList[index], 'operationFlag', '3')
        console.log('投喂作业', res.data, this.stageInfoList)
      })
    },
    //吊网记录 
    queryHangNetWorkInfo(info, index) {
      let initPage = info['hangNetWorkInfo'] && info['hangNetWorkInfo'].page ? info['hangNetWorkInfo'].page : 1
      traceabilitySystem.queryHangNetWorkInfo({
        entity: {
          batchId: this.batchId,
          endDate: `${info.endDate} 00:00:00`, startDate: `${info.startDate} 12:59:59`
        },
        page: 1,
        size: 10 * initPage,
      }).then(res => {

        this.$set(this.stageInfoList[index], 'hangNetWorkInfo', {
          tableData: res.data.content,
          page: ++info['hangNetWorkInfo'].page,
          num: res.data.totalElements
        }),
          this.$set(this.stageInfoList[index], 'operationFlag', '1')
        console.log('吊网记录', res.data, this.stageInfoList)
      })
    },
    //检验报告分页查询
    queryCheckInfo(info, index) {
      let initPage = info['checkInfo'] && info['checkInfo'].page ? info['checkInfo'].page : 1
      traceabilitySystem.queryCheckInfo({
        entity: {
          fishPondId: this.fishPondId,
          endDate: info.endDate,
          startDate: info.startDate
        },
        page: 1,
        size: 10 * initPage,
      }).then(res => {

        let tableData = JSON.parse(JSON.stringify(res.data.content))
        tableData.forEach(item => {
          item['normal'] = item.whetherNormal ? '正常' : '异常'
          console.log(item, '----')
        })
        console.log(tableData)
        info['checkInfo'] = {
          tableData: tableData,
          page: ++info['checkInfo'].page,
          num: res.data.totalElements
        }
        this.stageInfoList[index].isShow = true
      })
    },
    //防治数据
    queryEpidemicPreventionInfo(info, index) {
      let initPage = info['epidemicPreventionInfo'] && info['epidemicPreventionInfo'].page ? info['epidemicPreventionInfo'].page : 1
      traceabilitySystem.queryEpidemicPreventionInfo({
        entity: {
          fishPondId: this.fishPondId,
          batchId: this.batchId,
          endDate: `${info.endDate} 00:00:00`, startDate: `${info.startDate} 12:59:59`
        },
        page: 1,
        size: 10 * initPage,
      }).then(res => {
        this.$set(this.stageInfoList[index], 'epidemicPreventionInfo', {
          tableData: res.data.content,
          page: ++info['epidemicPreventionInfo'].page,
          num: res.data.totalElements
        }),
          console.log('防治', res.data, this.stageInfoList[index])
      })
    },
    //治疗数据
    queryDiseaseRecord(info, index) {
      let initPage = info['diseaseRecord'] && info['diseaseRecord'].page ? info['diseaseRecord'].page : 1
      traceabilitySystem.queryDiseaseRecord({
        entity: {
          batchId: this.batchId,
          endDate: info.endDate, startDate: info.startDate
        },
        page: 1,
        size: 10 * initPage,
      }).then(res => {

        this.$set(this.stageInfoList[index], 'diseaseRecord', {
          tableData: res.data.content,
          page: ++info['diseaseRecord'].page,
          num: res.data.totalElements
        }),
          console.log('治疗', res.data, this.stageInfoList)
      })
    },
    //农资投入
    queryMaterialRecordInfoByStage(info, index) {
      traceabilitySystem.queryMaterialRecordInfoByStage({
        batchId: this.batchId,
        endDate: info.endDate,
        startDate: info.startDate
      }).then(res => {
        this.$set(this.stageInfoList[index], 'materialRecordInfoByStage', res.data),
          console.log('农资投入', res.data, this.stageInfoList)
      })
    },
    //获取环境参数
    queryEnvironmentInfo(info, index) {
      traceabilitySystem.queryEnvironmentInfo({
        batchId: this.batchId,
        endDate: info.endDate,
        startDate: info.startDate
      }).then(res => {
        this.$set(this.stageInfoList[index], 'environmentInfo', res.data)
        console.log('环境数据', res.data, this.stageInfoList)
        if (res.data.length > 0 && res.data[0]) {
          setTimeout(() => {
            this.getLineEchats(res.data[0], index)
          }, 1000);
        }
      })
    },
    //疾病数据
    queryDiseaseCount(info, index) {
      traceabilitySystem.queryDiseaseCount({
        batchId: this.batchId,
        endDate: info.endDate,
        startDate: info.startDate
      }).then(res => {
        this.$set(this.stageInfoList[index], 'diseaseCount', res.data)
        console.log('疾病数据', res.data, this.stageInfoList)
        setTimeout(() => {
          this.getBarEchats(res.data, index)
        }, 100);
      })
    },
    // queryDiseaseCount
    async fileDownload(fileId) {
      let res = fileId && await DocumentApi.fileDownload({ fileId })
      let img = await blobToBase64(res.data)
      return img
    },
  },
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  justify-content: flex-start;
  flex-flow: row wrap
}

.contentList {
  width: 100%;

  .childBox {
    margin: 10px;
    padding-bottom: 10px;
    box-shadow: 0px 0px 6px 0px #2080ed;
    border-radius: 4px;
    background: #ffffff;

    .title {
      padding: 10px 0;

      div {
        line-height: 30px;
        padding: 0 10px;
        background: #2080ed;
        border-radius: 0 6px 6px 0;
        color: #ffffff;
        font-size: 16px;
      }
    }

    .plate {
      padding: 25px;
      position: relative;

      .qrCode {
        position: absolute;
        top: -50px;
        right: 30px;
        width: 160px;
        height: calc(100% + 50px);
        padding-top: 40px;
        box-sizing: border-box;
        background: #d7eaff;
        text-align: center;

        .img {
          width: 120px;
          height: 120px;
          background: #00718a;
          border-radius: 6px;
          margin: 0 auto;

          img {
            width: 120px;
            height: 120px;
          }
        }
      }

      .img {
        // width: 300px;
        // height: 160px;
        border-radius: 6px;
        background: #e6e6e6;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .batchInfo {
        width: 600px;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding: 20px 40px;
        box-sizing: border-box;


        .info {
          margin-right: 30px;
          color: #999999;
          font-size: 16px;
          padding: 5px 0;
          text-align: left;

          .label {
            color: #333333;
            border-left: 3px solid #2080ed;
            padding-left: 10px;
          }
        }
      }
    }

    .plate_zt,
    .plate_zm {
      .fishInfo {
        display: flex;
        justify-content: flex-start;

        .fishData {
          padding: 10px 30px;
          font-size: 16px;
          color: #2080ed;
          background: #edf7ff;
          border-radius: 4px;
          margin: 5px 10px;
        }
      }

      .info_zt {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        box-sizing: border-box;


        .info {
          color: #999999;
          font-size: 16px;
          padding: 5px 0;
          margin-right: 40px;
          margin-bottom: 10px;
          text-align: left;

          .imglList {
            width: calc(100% - 100px);
            position: relative;

            .toLeftRightBtn {
              position: absolute;
              top: 50px;
              width: 50px;
              height: 50px;
              border: 1px solid #2080ed;
              background: #77b6ff;
              border-radius: 25px;
              color: #1383e4;
              line-height: 48px;
              text-align: center;
              font-size: 24px;
            }

            .left {
              left: -20px;
            }

            .right {
              right: -20px;
            }

            .img {
              width: calc(20% - 20px);
              margin: 0 10px;

              img {
                width: 100% !important;
                height: 100% !important;
              }
            }
          }

          .label {
            color: #333333;
            border-left: 3px solid #2080ed;
            padding-left: 10px;
            height: 21px;
          }
        }
      }
    }
  }

  .childBox_jd {
    background: #ffffff;
    box-shadow: none;
    border: 1px solid #cecece;
    overflow: hidden;
    transition: all 0.5s;

    .title {
      width: 100%;
      background: #ffffff;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .titleName {
        background: #2080ed;
        margin-right: 20px;
      }
    }

    .stage {
      width: 100%;

      .stageItem {
        width: calc(100% - 32px);
        margin: 15px;
        background: rgba(173, 173, 173, 0.048);
        padding: 10px;
        border: 1px solid #e0e0e0;
        transition: all 0.3s;
        border-radius: 8px;
        box-shadow: 0px 10px 20px 0px #e9e9e9;

        .stageTitle {
          height: 30px;
          border-left: 5px solid #93c7fc;
          align-content: center;

          .label {
            margin-left: 2px;
            line-height: 30px;
            padding: 0 20px;
            background: #cbe5fc;
            color: #016daf;
          }

          .line {
            width: calc(100% - 110px);
            height: 14px;
            border-bottom: 1px dashed #cecece;
          }
        }

        .stageInfo {
          padding: 20px;

          .weatherData {
            width: 300px;
            height: 300px;
            overflow-y: auto;

            ::v-deep button {
              width: 100%;
              margin: 10px 0;
              line-height: 20px;
              font-size: 16px;
              display: block;
            }
          }

          .eCharts {
            width: calc(100% - 300px);
            height: 300px;
          }

          .inputGoods {
            width: 200px;
            height: 100px;
            border: 1px solid #d8e7f2;
            border-radius: 4px;
            background: #edf7ff;
            margin-right: 20px;

            .info {
              height: 49px;
              width: 200px;
              text-align: center;
              line-height: 49px;
              color: #016daf;
              overflow: hidden;
              /* 确保超出容器的文本被裁剪 */
              white-space: nowrap;
              /* 确保文本在一行内显示 */
              text-overflow: ellipsis;
              /* 超出部分显示为省略号 */
              padding: 0 15px
            }

            .Goodsline {
              width: 180px;
              height: 1px;
              background: #d8e7f2;
              margin: 0 auto;
            }
          }
        }
      }

      .stageItem:hover {
        background: #ffffff;
        transform: translate(-10px, 0);
        border: 1px solid #3d97bb;
      }
    }
  }
}

::v-deep .el-table {
  position: static;
  border-radius: 4px;

  .common-layout {
    height: none !important;
  }
}

::v-deep .infinite-list {
  width: 100%;
  max-height: 200px;
}

.noData {
  padding: 10px 20px;
  margin: 10px;
  color: #1383e4;
  text-align: center;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity .25s
}

.fade-enter,
.fade-leave-to

/* .fade-leave-active in <2.1.8 */
  {
  opacity: 0
}

.currentList {
  display: flex;
  justify-content: flex-start;
  padding: 0px 10px;

  span {
    display: inline-block;
    padding: 10px 20px;
    margin-right: 15px;
    color: #666666;
    background-color: #ededed;
    cursor: pointer;
  }

  .active {
    color: #ffffff;
    background-color: #77b6ff;
  }
}

.baseBasicImg {
  width: 300px;
  height: 200px;
  background-color: #77b7ff30;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 5px;
}
</style>
